<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/mstyle.css" />
		<style type="text/css">
			.optionalEdit{display: none;}
		</style>
	</head>
	<body class="optionalPage">
		<!--navBar-->
		<header class="mui-bar mui-bar-nav">
			<button class="optionalEdit mui-btn mui-btn-link mui-btn-nav mui-pull-right"> 编辑<span class="mui-icon mui-icon-right-nav"></span></button>
			<h1 class="mui-title">自选</h1>
		</header>
		<!--contTitle-->
		<div class="contTitle mui-content">
			<div class="mui-row">
				<div class="mui-col-sm-6 mui-col-xs-6">
					<li class="mui-table-view-cell">名称</li>
				</div>
				<div class="mui-col-sm-3 mui-col-xs-3">
					<li class="mui-table-view-cell price">价格</li>
				</div>
				<div class="mui-col-sm-3 mui-col-xs-3">
					<li class="mui-table-view-cell percent">涨跌幅</li>
				</div>
			</div>
		</div>
		<!--contInner-->
		<div class="contInner mui-scroll-wrapper" style="top:2.4rem;bottom:50px">
			<div class="mui-scroll mui-content" id="cont"></div>
			<script type="text/template" id='temp'>
				{%for(var i=0;i< data.length;i++){%}
				<div class="mui-row" data-code='{%=data[i].code%}'>
					<div class="mui-col-sm-6 mui-col-xs-6">
						<li class="mui-table-view-cell mui-double mui-clearfix">
							{%if(data[i].type==2){%}
							<img src="images/HK_20x15_@3x.png" alt="" class="nameIcon" />
							{%}else{%}
							<img src="images/US_40_29.png" alt="" class="nameIcon" />
							{%}%}
							<!--<img src="images/US_40_29.png" alt="" class="nameIcon" />-->
							<p class="nameInfo">
								<span class="name">{%=data[i].name%}</span><span>{%=data[i].code%}</span>
							</p>
						</li>
					</div>
					<div class="mui-col-sm-3 mui-col-xs-3 mui-single">
						<li class="mui-table-view-cell price">
							<span class="{%=data[i].code%}price">{%=data[i].price%}</span>
						</li>
					</div>
					<div class=" mui-col-sm-3 mui-col-xs-3 mui-single">
						{%if(Number(data[i].changeRate)<0){%}
						<li class="mui-table-view-cell lowpercent {%=data[i].code%}rate">{%=data[i].changeRate%}%</li>
						{%}else{%}
						<li class="mui-table-view-cell highpercent {%=data[i].code%}rate">{%=data[i].changeRate%}%</li>
						{%}%}
					</div>
				</div>
				{%}%}
			</script>
		</div>
		<!--tabBar-->
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item" data-page='marketPage' href="#">
				<img src="images/HQ_icon_21x21_@3x.png" alt="" />
				<span>行情</span>
			</a>
			<a class="mui-tab-item mui-active" data-page='optionalPage' href="#">
				<img src="images/ZX_icon_select_21x21_@3x.png" alt="" />
				<span class="activeBar">自选</span>
			</a>
			<a class="mui-tab-item " data-page='newsPage' href="#">
				<img src="images/news.png" alt="" />
				<span>资讯</span>
			</a>
			<a class="mui-tab-item " data-page='tradePage' href="#">
				<img src="images/JY_icon_21x21_@2x.png" alt="" />
				<span>交易</span>
			</a>
			<a href="javascript:void(0)" class="mui-tab-item" data-page='centerPage'>
				<img src="images/WD_icon_21x21_@3x.png" alt="" />
				<span>我的</span>
			</a>
		</nav>
	</body>
	<script src="js/mui.min.js"></script>
	<script src='libs/easymob-webim-sdk/jquery-1.11.1.js'></script>
	<script src='js/config.js'></script>
	<script src='js/temp.js'></script>
	<script src='js/mstock.js'></script>
	<script type="text/javascript">
		mui.init({
			keyEventBind: {
				backbutton: false  //关闭back按键监听
			}
		});
		mstcok().tabBarFun();
		mui('.mui-bar-nav').on('tap','.optionalEdit',function(){
			mui.openWindow({
				url: 'optionalEdit.html'
			});
		})
		mui('.mui-scroll-wrapper').scroll({
			scrollY: true, //是否竖向滚动
			scrollX: false, //是否横向滚动
			startX: 0, //初始化时滚动至x
			startY: 0, //初始化时滚动至y
			indicators: false, //是否显示滚动条
			deceleration: 0.0005, //阻尼系数,系数越小滑动越灵敏
			bounce: true //是否启用回弹
		});
		if(account&&account!=''){
			mstcok().optional();
		}
		window.addEventListener('refresh',function(){
			plus.webview.getWebviewById('optional.html').reload();
		});
		jQuery(function () { 
			var isPageHide = false; 
			window.addEventListener('pageshow', function () { 
			    if (isPageHide) { 
				    window.location.reload(); 
			    } 
			}); 
			window.addEventListener('pagehide', function () { 
			   isPageHide = true; 
			}); 
		})
	</script>
</html>